<template>
  <div class="">
    <div class="filter-container">
      <el-button v-permission="['city:add']" class="filter-item" type="primary" icon="el-icon-edit" @click="showAdd(undefined)">添加城市</el-button>
      <el-button v-permission="['city:refresh']" class="filter-item" type="danger" icon="el-icon-refresh" @click="refresh">刷新缓存</el-button>
      <el-button v-permission="['city:download']" class="filter-item" type="danger" icon="el-icon-download" @click="downloadJson">下载JSON文件</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      :tree-props="props"
      :load="loadChildren"
      row-key="id"
      size="small"
      element-loading-text="正在查询中..."
      lazy
      default-expand-all
      border
      fit
      highlight-current-row
    >
      <el-table-column align="left" label="名称" prop="name" width="200"/>
      <el-table-column align="center" label="简称" prop="shortName" width="150"/>
      <el-table-column align="center" label="城市代码" prop="cityCode" width="150"/>
      <el-table-column align="center" label="邮编" prop="zipCode" width="150"/>
      <el-table-column align="center" label="坐标" width="200px">
        <template slot-scope="scope">
          {{ scope.row.lng }}, {{ scope.row.lat }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="拼音" prop="pinyin" width="150"/>
      <el-table-column align="center" label="状态" prop="status" width="150px">
        <template slot-scope="scope">
          <el-switch v-permission="['city:edit']" v-model="scope.row.enabled" :active-value="true" :inactive-value="false" active-color="#13ce66" @change="changeStatus(scope.row,$event)"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-permission="['city:add']" type="primary" size="mini" @click="showAdd(scope.row)">添加子项</el-button>
          <el-button v-permission="['city:detail']" type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
          <el-button v-permission="['city:delete']" type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :close-on-click-modal="false" :title="isAdd?'新增城市':'编辑城市'" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item v-if="parentCity" label="上级城市">{{ parentCity }}</el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="dataForm.name"/>
        </el-form-item>
        <el-form-item label="简称" prop="shortName">
          <el-input v-model="dataForm.shortName"/>
        </el-form-item>
        <el-form-item label="拼音" prop="pinyin">
          <el-input v-model="dataForm.pinyin" />
        </el-form-item>
        <el-form-item label="代码" prop="cityCode">
          <el-input v-model="dataForm.cityCode" />
        </el-form-item>
        <el-form-item label="邮编" prop="zipCode">
          <el-input v-model="dataForm.zipCode" />
        </el-form-item>
        <el-form-item label="经度" prop="lng">
          <el-input v-model="dataForm.lng" />
        </el-form-item>
        <el-form-item label="维度" prop="lat">
          <el-input v-model="dataForm.lat" />
        </el-form-item>
        <el-form-item label="启用" prop="enabled">
          <el-switch v-model="dataForm.enabled" :active-value="true" :inactive-value="false" active-color="#13ce66"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-permission="['city:add']" v-if="isAdd" type="primary" @click="add">确定</el-button>
        <el-button v-permission="['city:edit']" v-else type="primary" @click="edit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { CityService } from '@/api/CommonService'
import Notify from '@/utils/notify'

export default {
  name: 'Platform',
  data() {
    return {
      props: { children: 'children', hasChildren: 'hasChildren' }, isAdd: true, dialogFormVisible: false,
      list: [], total: 0, listLoading: true, parentCity: undefined,
      dataForm: { name: undefined, shortName: undefined, level: 0, parentId: 0, cityCode: undefined, zipCode: undefined, lng: undefined, lat: undefined, pinyin: undefined, enabled: true },
      rules: {
        name: [{ required: true, message: '城市名称不能为空', trigger: 'blur' }],
        shortName: [{ required: true, message: '城市简称不能为空', trigger: 'blur' }],
        pinyin: [{ required: true, message: '城市拼音不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.initList()
  },
  methods: {
    initList() {
      this.listLoading = true
      CityService.listCity({ level: 1 }).then(result => {
        this.list = result
        this.listLoading = false
      })
    },
    loadChildren(row, treeNode, resolve) {
      CityService.listCity({ parentId: row.id }).then(result => {
        resolve(result)
      })
    },
    changeStatus(row, status) {
      CityService.editCity(row).then(() => {
        Notify.success(this, '设置成功!')
      })
    },
    resetForm() {
      this.dataForm = { id: 0, name: undefined, shortName: undefined, level: 1, parentId: 100000, cityCode: undefined, zipCode: undefined, lng: undefined, lat: undefined, pinyin: undefined, enabled: true }
    },
    remove(row) {
      this.$confirm('您确认要删除该' + row.name + '城市码?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        CityService.deleteCity(row.id)
          .then(() => {
            Notify.success(this, '删除成功!')
            this.$set(this.$refs.table.store.states, 'lazyTreeNodeMap', {})
            this.initList()
          })
      })
    },
    showAdd(row) {
      this.isAdd = true
      this.resetForm()
      this.dialogFormVisible = true
      this.parentCity = undefined
      if (row) {
        this.parentCity = row.name
        this.dataForm.level = row.level + 1
        this.dataForm.parentId = row.id
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    add() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          CityService.addCity(this.dataForm)
            .then(() => {
              this.dialogFormVisible = false
              Notify.success(this, '添加成功!')
              this.initList()
            })
        }
      })
    },
    showEdit(row) {
      this.isAdd = false
      this.parentCity = undefined
      this.dialogFormVisible = true
      this.dataForm = Object.assign({}, row)
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    edit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          CityService.editCity(this.dataForm).then(() => {
            this.dialogFormVisible = false
            Notify.success(this, '更新成功!')
            this.initList()
          })
        }
      })
    },
    refresh() {
      this.$confirm('该命令执行耗时较长,系统将在后台执行请勿频繁操作,您是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        CityService.refreshCache().then(() => {
          Notify.success(this, '推送成功,系统正在后台执行!')
        })
      })
    },
    downloadJson() {
      this.$confirm('如果更新了数据请重新刷新缓存然后下载,您是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        CityService.downloadCity().then(result => {
          window.open(result, '_blank')
        })
      })
    }
  }
}
</script>
